<!-- /**
** @descerpion:这是传统的饼图
 */ -->
<template>
  <!-- <div> -->
  <Echart
    id="centreLeft1Charttwo"
    :options="options"
    :height="nowheight"
    :width="nowwidth"
  />
  <!-- </div> -->
</template>

<script>
import Echart from "../../baseMain/index.vue";
export default {
  components: {
    Echart
  },
  props: {
    zhtitle: {
      type: String,
      default: () => ""
    },
    nowwidth: {
      type: String,
      default: () => "100%"
    },
    nowheight: {
      type: String,
      default: () => "100%"
    },
    cdata: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      options: {}
    };
  },
  watch: {
    cdata: {
      handler(newData) {
        this.options = {
          // backgroundColor: '',
          tooltip: {
            trigger: 'item',
            formatter: "{b} : {d}% <br/> {c}"
          },
          legend: {
            bottom: '0%',
            borderColor: 'red',
            borderWidth: '2px',
            borderType: 'soild',
            // orient: 'vertical',
            icon: "circle",
            color: '#fff',
            label: {
              itemStyle: {
                color: '#fff'
              }
            },
            textStyle: {
              color: '#000'
            }
          },
          series: [
            {
              type: 'pie',
              radius: ['35%', '58%'],
              center: ['50%', '50%'],
              itemStyle: {
                // normal: {
                borderWidth: 5,
                borderColor: 'rgba(255,255,255, 1)'
                // }
              },
              data: newData.series,
              labelLine: {
                // normal: {
                show: true,
                length: 10,
                length2: 20,
                lineStyle: {
                  width: 1
                }
                // }
              },
              label: {
                // normal: {
                formatter: '{b|{b}}\n{d|{d}%}',
                rich: {
                  b: {
                    fontSize: 14,
                    color: '#000',
                    align: 'left',
                    padding: [0, 0, 0, 0]
                  },
                  d: {
                    fontSize: 18,
                    color: '#000',
                    align: 'left',
                    padding: [10, 0, 0, 0]
                  }
                  // }
                }
              }
            }
            // {
            //     // 外层刻度
            //     name: "",
            //     type: 'gauge',
            //     splitNumber: 240, // 刻度数量
            //     radius: '68%', // 图表尺寸
            //     center: ['50%', '50%'],
            //     startAngle: 90,
            //     endAngle: -269.9999,
            //     axisLine: {
            //         show: false,
            //         lineStyle: {
            //             width: 0,
            //             shadowBlur: 0,
            //             color: [
            //                 [1, '#969696']
            //             ]
            //         }
            //     },
            //     axisTick: {
            //         show: false,
            //         lineStyle: {
            //             color: 'auto',
            //             width: 2
            //         },
            //         length: 100,
            //         splitNumber: 1
            //     },
            //     splitLine: {
            //         show: true,
            //         length: 2,
            //         lineStyle: {
            //             color: 'auto',
            //         }
            //     },
            //     axisLabel: {
            //         show: false
            //     }
            // }
          ]
        };
        if (this.zhtitle.length > 0) {
          this.options.title = {
            text: this.zhtitle,
            left: "center",
            textStyle: {
              fontSize: 16,
              // fontWeight:"blod",
              color: "#fff"
            }
          };
        }
      },
      immediate: true,
      deep: true
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
